<template>
  <div>
    <div class="select_top">
      <el-input
        v-model="alistParam.orgname"
        @keyup.native.enter="getAppaList"
        placeholder="请输入单位名称"
        clearable
        style="width:18%;margin-right:10px"
      ></el-input>
      <el-input
        v-model="alistParam.auuid"
        @keyup.native.enter="getAppaList"
        placeholder="请输入UUID"
        clearable
        style="width:18%;margin-right:10px"
      ></el-input>
      <el-input
        v-model="alistParam.amodel"
        @keyup.native.enter="getAppaList"
        placeholder="请输入型号"
        clearable
        style="width:18%;margin-right:10px"
      ></el-input>
      <el-select clearable v-model="alistParam.status" placeholder="状态" style="width:18%;margin-right:10px">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-button @click="getAppaList">搜索</el-button>
      <el-button type="primary" style="float:right" v-if="belongunit!='10'" @click="goaddAppa">新增</el-button>
    </div>
    <el-table
      v-loading="loadingAppa"
      ref="filterTable"
      :data="apparatus"
      style="width: 92%;font-size:13px;margin: 20px auto"
    >
      <el-table-column type="index" width="50" label="序号"></el-table-column>
      <el-table-column prop="hash.auuid" label="UUID"></el-table-column>
      <el-table-column prop="hash.amodel" label="型号"></el-table-column>
      <el-table-column prop="hash.aname" label="设备名称"></el-table-column>
      <el-table-column label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.hash.status=='0'" style="color:red">离线</span>
            <span v-else>在线</span>
          </template>
      </el-table-column>
      <el-table-column prop="hash.orgname" label="所属部门" v-if="belongunit=='10'"></el-table-column>
      <el-table-column prop="hash.sim" label="SIM卡"></el-table-column>
      <el-table-column prop="hash.intime" label="创建时间"></el-table-column>

      <el-table-column label="操作" :width="belongunit!=10?'250':''">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="getAppaDetail(scope.row,'1')">查看</el-button>
          <el-button type="primary" size="small" v-if="belongunit!='10'" @click="getAppaDetail(scope.row,'2')">编辑</el-button>
          <el-button type="danger" size="small" v-if="belongunit!='10'" @click="deleteAppa(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="getAppaList"
      :currentPage.sync="currentPage3"
      :pageSize="pagesize"
      layout="prev, pager, next, jumper"
      :total="total"
      style="text-align:center"
    >
    </el-pagination>

    <el-dialog :title="diatitle" :visible.sync="showAppaUpdate" width="40%">
      <el-form labelWidth="100px">
        <el-form-item label="UUID" class="is-required">
          <el-input clearable v-model="aupdateParam.auuid" v-validate="'required'" name="UUID"></el-input>
          <div class="el-form-item__error">{{ errors.first('UUID') }}</div>
          <div style="font-size:11px;">（请确保ID与执法记录仪ID保持一致）</div>
        </el-form-item>
        <el-form-item label="设备名称" class="is-required">
          <el-input clearable v-model="aupdateParam.aname" v-validate="'required'" name="设备名称"></el-input>
          <div class="el-form-item__error">{{ errors.first('设备名称') }}</div>
        </el-form-item>
        <el-form-item label="型号" class="is-required">
          <el-input clearable v-model="aupdateParam.amodel" v-validate="'required'" name="型号"></el-input>
          <div class="el-form-item__error">{{ errors.first('型号') }}</div>
        </el-form-item>
        <el-form-item label="SIM卡" class="is-required">
          <el-input clearable v-model="aupdateParam.sim" v-validate="'required'" name="SIM卡"></el-input>
          <div class="el-form-item__error">{{ errors.first('SIM卡') }}</div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showAppaUpdate = false">取 消</el-button>
        <el-button type="primary" @click="addAppa" v-if="diatitle=='添加设备'">提 交</el-button>
        <el-button type="primary" @click="saveAppa" v-else>提 交</el-button>
      </span>
    </el-dialog>

    <el-dialog title="查看设备" :visible.sync="showAppacheck" width="40%">
      <el-form labelWidth="100px">
        <el-form-item label="UUID">
          <el-input clearable v-model="aupdateParam.auuid"></el-input>
        </el-form-item>
        <el-form-item label="设备名称">
          <el-input clearable v-model="aupdateParam.aname"></el-input>
        </el-form-item>
        <el-form-item label="型号">
          <el-input clearable v-model="aupdateParam.amodel"></el-input>
        </el-form-item>
        <el-form-item label="SIM卡">
          <el-input clearable v-model="aupdateParam.sim"></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage3: 1,
      pagesize: 10,
      total: 10,
      ts: this.newStore(),
      diatitle:'',
      belongunit: localStorage.getItem('belongunit'),
      showAppa: false,
      showAppaUpdate:false,
      showAppacheck:false,
      //获取设备列表的参数
      alistParam:{
          'handle':'D4C22D9B0E4876FAD400B0C71B331F7D55376C8362D0D5243EC70856D48905AC75753A97F8032F38'
      },
      ainsertParam:{},
      aupdateParam:{},
      apparatus:[],
      loadingAppa:true,
      options: [
        {
          value: "1",
          label: "在线"
        },
        {
          value: "0",
          label: "离线"
        }
      ],
      value: ""
    };
  },
  created() {
    this.getAppaList();
  },
  methods: {
    //获取设备列表
    getAppaList(){
        this.loadingAppa = true;
        this.alistParam.start = (this.currentPage3 - 1) * this.pagesize;
        this.alistParam.limit = this.pagesize;

        this.spost(this.ts, '/mainservlet', this.alistParam).then((ts)=>{
           this.apparatus = ts.d.data.operation1;
           this.total = parseInt(ts.d.data.operation2[0].hash.allrs);
           this.loadingAppa = false;
        });
    },
    //打开添加设备模态框
    goaddAppa(){
      this.diatitle = "添加设备";
      this.aupdateParam = {};
      this.showAppaUpdate = true;
    },
    //添加设备
    addAppa(){
      this.aupdateParam.handle = 'D4C22D9B0E4876FAD400B0C71B331F7D21A964A4F4B9E8C5843D27F7517BFB56'
      //校验有没有空的字段
      this.$validator.validateAll().then(result => {
        if (result) {
          this.spost(this.ts, '/mainservlet', this.aupdateParam).then(() => {
            this.$message({
              type: 'success',
              message: '新增成功!',
            });
            this.showAppaUpdate = false;
            this.getAppaList();
            this.aupdateParam = {};
          });
        } else {
          this.$message.error("内容不能为空！");
          return false;
        }
      });
    },
    //获取设备详情
    getAppaDetail(item,sign){
      this.diatitle = "编辑设备";
      const req = {
        handle: 'D4C22D9B0E4876FAD400B0C71B331F7D55376C8362D0D5243EC70856D48905ACD57DDD0DFB4A4AB9',
        id: item.hash.id,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts)=>{
          this.aupdateParam = ts.d.data.operation1[0].hash;
          if(sign=='1'){
            this.showAppacheck = true;
          }else{
            this.showAppaUpdate = true;
          }
          
      });
    },
    saveAppa(){
      this.aupdateParam.handle = 'D4C22D9B0E4876FAD400B0C71B331F7D6655C600C04B11203EC70856D48905AC6A677D1C1AAE06F9';
      //校验有没有空的字段
      this.$validator.validateAll().then(result => {
        if (result) {
          this.spost(this.ts, '/mainservlet', this.aupdateParam).then(() => {
            this.$message({
              type: 'success',
              message: '修改成功!',
            });
            this.showAppaUpdate = false;
            this.getAppaList();
            this.aupdateParam = {};
          });
        } else {
          this.$message.error("内容不能为空！");
          return false;
        }
      });
    },
    deleteAppa(item){
      const req = {
        handle: 'D4C22D9B0E4876FAD400B0C71B331F7DEAA0F765F26818C23EC70856D48905AC6A677D1C1AAE06F9',
        id: item.hash.id,
      };
      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.spost(this.ts, '/mainservlet', req).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!',
          });
          this.getAppaList();
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消',
        });
      });
    }
  },
};
</script>
<style lang="stylus" scoped>
.select_top {
  width: 92%;
  margin: 20px auto;
}
</style>

